<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100vw;
      height: 20vh;
      background-color: #ccc;
      border: 1px solid #000;
      text-align: center;
      line-height: 20vh;
    }
  </style>
</head>

<body>
  <div class="container" id="container" multiple webkitdirectory mozdirectoey odirectory>
    将文件拖拽到此处
  </div>
  <!-- webkitdirectory  加上这个属性  为上传文件夹 -->
  <input type="file" id="file-input" multiple mozdirectoey odirectory />

  <button onclick="uploadFile()">上传文件</button>

  <script>

    const div = document.querySelector(".container");

    div.ondragenter = function (e) {
      e.preventDefault();
      e.stopPropagation();
      console.log("进入");
    }
    //   在上面 
    div.ondragover = function (e) {
      e.preventDefault();   //阻止默认事件
      // e.stopPropagation();  //阻止冒泡
      console.log("在上面");
    }

    /*
        // ---------------------------- 放下
        div.ondrop = function (e) {
          container.innerHTML = ''
          e.preventDefault();  //阻止默认事件
          e.stopPropagation();  //阻止冒泡
          console.log("放下");
          const items = e.dataTransfer.items;
    
          console.log(items)
          const filess = []
    
          for (let i = 0; i < items.length; i++) {
            const item = items[i].webkitGetAsEntry()
            if (item) {
              console.log("");
              traverseFileTree(item, filess)
            }
          }
    
          uploadFile(filess)
        }
        function traverseFileTree(item, filess) {
          if (item.isFile) {
            item.file(file => {
              filess.push(file)
            })
          } else if (item.isDirectory) {
            const directoryReader = item.createReader()
            directoryReader.readEntries(entries => {
              for (let i = 0; i < entries.length; i++) {
                traverseFileTree(entries[i], filess)
    
              }
            })
          }
        }
    
        // JavaScript代码：  上传  及响应值
        function uploadFile(filess) {
          const formData = new FormData();
          for (let i = 0; i < filess.length; i++) {
            formData.append('files', filess[i])
    
          }
    
          fetch('/upload', {
            method: 'POST',
            body: formData
          })
            .then(response => response.json())
            .then(data => {
              console.log('服务器返回的数据:', data);
            })
            .catch(error => {
              console.error('上传文件时发生错误:', error);
            });
        }
    
    */
    /*-----------------------------------
        /*
          // 读取文件夹
          entry.createReader().readEntries((entries) => {
            for (let index = 0; index < entries.length; index++) {
              console.log("entries=", entries[index]);
              container.innerHTML += entries[index].name + ' , '
            }
          })
    
          // 读取文件
          entry.file((f) => {
            console.log(f);
            container.innerHTML = f.name
          })
        
        */




    // 放下--------------上传单个文件------------------------------
    div.ondrop = function (e) {
      e.preventDefault();  //阻止默认事件
      e.stopPropagation();  //阻止冒泡
      const file = e.dataTransfer.files[0]
      uploadFilels(file)
      // console.log("放下=", file);
    }

    function uploadFilels(file) {
      const formData = new FormData();
      formData.append('file', file)
      fetch('/upload', {
        method: "POST",
        body: formData
      })
        .then(response => response.json())
        .then(data => {
          console.log('服务器返回的数据', data)
        })
        .catch(error => {
          console.log("上传文件时发生错误", error)
        })
    }



    // JavaScript代码：  单个文件上传  及响应值
    function uploadFile() {
      const fileInput = document.getElementById('file-input');
      const file = fileInput.files[0];
      if (file) {
        const formData = new FormData();
        formData.append('file', file);

        fetch('/upload', {
          method: 'POST',
          body: formData
        })
          .then(response => response.json())
          .then(data => {
            console.log('服务器返回的数据:', data);
          })
          .catch(error => {
            console.error('上传文件时发生错误:', error);
          });
      }
    }


  </script>
</body>

</html>